<template>
  <div class="main-box">
    <div class="table-box">
      <div class="area-search">
        <el-card>
          <el-form :model="searchForm" ref="searchForm">
            <el-row :gutter="20" class="items-center">
              <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5">
                <el-form-item label="科室名称:" prop="searchFormKeShi">
                  <el-select @change="searchFormKeShiChange" v-model="searchFormKeShi" class="m-2" placeholder="请选择科室名称">
                    <el-option
                      v-for="item in useIntegratedProject().keShiOption"
                      :key="item.KeShiID"
                      :label="item.KeShiMingCheng + ';' + item.KeShiID"
                      :value="item.KeShiID"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="5">
                <el-form-item label="所属报告:" prop="searchFormBaoGao">
                  <el-select @change="searchFormBaoGaoChange" v-model="searchFormBaoGao" class="m-2" placeholder="请选择所属报告">
                    <el-option v-for="item in baoGaoType" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-button size="default" type="primary" class="ml10">
                  <el-icon style="margin-right: 5px"><Search /></el-icon>
                  操作云端
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      <div class="area-other-table">
        <el-card class="area-other-table-card">
          <el-row :gutter="10">
            <div class="split-main">
              <splitpane :split-set="settingLR">
                <template #paneL>
                  <div class="ApplicationForm">
                    <ApplicationForm />
                  </div>
                </template>
                <template #paneR>
                  <splitpane :split-set="settingRi">
                    <template #paneL>
                      <div class="Combination" style="margin-right: 5px">
                        <Combination />
                      </div>
                    </template>
                    <template #paneR>
                      <div class="TagProject" style="margin-left: 5px">
                        <TagProject />
                      </div>
                    </template>
                  </splitpane>
                </template>
              </splitpane>
            </div>
          </el-row>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="integratedProject">
import ApplicationForm from "@/views/DataMaintenance/IntegratedProject/components/ApplicationForm/ApplicationForm.vue";
import Combination from "@/views/DataMaintenance/IntegratedProject/components/Combination/Combination.vue";
import TagProject from "@/views/DataMaintenance/IntegratedProject/components/TagProject/TagProject.vue";
import splitpane, { ContextProps } from "@/components/ReSplitPane";
import { computed, onMounted, reactive, ref, watch } from "vue";
import { baoGaoType } from "@/utils/dict";
import { useIntegratedProject } from "@/stores/modules/integratedProject";
const searchForm = reactive({});
const searchFormKeShi = ref();
const searchFormBaoGao = ref();

const settingLR: ContextProps = reactive({
  minPercent: 20,
  defaultPercent: 30,
  split: "vertical"
});

const settingRi: ContextProps = reactive({
  minPercent: 20,
  defaultPercent: 60,
  split: "vertical"
});

// const settingTB: ContextProps = reactive({
//   minPercent: 20,
//   defaultPercent: 40,
//   split: "horizontal"
// });
const getKeShiXinXiSel = () => {
  useIntegratedProject().getKeShiXinXiSel();
};
const newSearchFormKeShi = computed(() => {
  return useIntegratedProject().keShiId;
});
watch(newSearchFormKeShi, () => {
  // console.log("计算属性的值发生了变化:", newValue);
  searchFormKeShi.value = newSearchFormKeShi.value;
});
// 默认的是第0 项的数据
// 切换的change
const searchFormKeShiChange = () => {
  useIntegratedProject().setKeShiId(searchFormKeShi.value);
  useIntegratedProject().getJianSuoZuHeXiangMuSel(searchFormKeShi.value);
};
// 切换报告
const searchFormBaoGaoChange = () => {
  useIntegratedProject().setBaoGao(searchFormBaoGao.value);
  if (useIntegratedProject().shenQingDanID) {
    useIntegratedProject().getZuHeXiangMuSel();
    useIntegratedProject().clearBaoHanMingXiOption();
    useIntegratedProject().clearBaoHanZuHeOption();
  }
};

onMounted(() => {
  getKeShiXinXiSel();
  searchFormBaoGao.value = baoGaoType[0].value;
  useIntegratedProject().setBaoGao(searchFormBaoGao.value);
  // useIntegratedProject().getJianSuoZuHeXiangMuSel(searchFormBaoGao.value);
});
</script>

<style lang="scss" scoped>
.proTable_ls {
  margin-top: 10px;
}
.table-box {
  display: flex;
  overflow: hidden;
}
.area-search {
  margin-bottom: 10px;
  :deep(.el-form-item--default) {
    align-items: center;
    margin-bottom: 0;
  }
}
.area-other-table {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .area-other-table-card {
    width: 100%;
    height: 100%;
    :deep(.el-row) {
      width: 100%;
    }
  }
  :deep(.el-card__body) {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: var(--el-bg-color-page);
  }
  .split-main {
    width: 100%;
    height: 100%;
    background: #f2f3f5;
  }
  .ApplicationForm {
    width: 100%;
    height: 100%;
  }
  .Combination {
    width: 100%;
    height: 100%;
  }
  .TagProject {
    width: 100%;
    height: 100%;
  }
}
</style>
